﻿@inherits AppComponentBase

<header class="main-header">
    <div class="header-main-container">
        <div class="header-content-container">
            @if (isDocsRoute)
            {
                <BitButton Class="header-menu-btn"
                           Variant="BitVariant.Text"
                           OnClick=@WrapHandled(ToggleMenu)>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21 7.75H3C2.59 7.75 2.25 7.41 2.25 7C2.25 6.59 2.59 6.25 3 6.25H21C21.41 6.25 21.75 6.59 21.75 7C21.75 7.41 21.41 7.75 21 7.75Z" fill="currentColor" />
                        <path d="M21 12.75H3C2.59 12.75 2.25 12.41 2.25 12C2.25 11.59 2.59 11.25 3 11.25H21C21.41 11.25 21.75 11.59 21.75 12C21.75 12.41 21.41 12.75 21 12.75Z" fill="currentColor" />
                        <path d="M21 17.75H3C2.59 17.75 2.25 17.41 2.25 17C2.25 16.59 2.59 16.25 3 16.25H21C21.41 16.25 21.75 16.59 21.75 17C21.75 17.41 21.41 17.75 21 17.75Z" fill="currentColor" />
                    </svg>
                </BitButton>
            }
            <a class="header-logo" href="@Urls.Home" aria-label="Home page" />
            <div class="header-link header-ps-btn @(isDocsRoute ? "header-link--active" : null)">
                Products
                <div class="header-menu-popup">
                    <div class="col">
                        <a class="menu-item @(isLcncDocRoute ? "active" : "")" href="@Urls.LowCodeNoCode">
                            <div class="menu-item-content">
                                <div class="item-title">Low-code/<span style="opacity:0.5">No-code</span></div>
                                <div class="item-desc">(Private alpha)</div>
                            </div>
                        </a>

                        <a class="menu-item @(isTemplateDocRoute ? "active" : "")" href="@Urls.Templates">
                            <div class="menu-item-content">
                                <div class="item-title">Boilerplate</div>
                                <div class="item-desc">Feature-rich .NET project template</div>
                            </div>
                        </a>

                        <a class="menu-item @(isButilDocRoute ? "active" : "")" href="@Urls.Butil">
                            <div class="menu-item-content">
                                <div class="item-title">Butil</div>
                                <div class="item-desc">Blazor utils for browser APIs</div>
                            </div>
                        </a>

                        <a class="menu-item @(isBswupDocRoute ? "active" : "")" href="@Urls.Bswup">
                            <div class="menu-item-content">
                                <div class="item-title">Bswup</div>
                                <div class="item-desc">Blazor PWA on steroids</div>
                            </div>
                        </a>

                        <a class="menu-item @(isBesqlDocRoute ? "active" : "")" href="@Urls.Besql">
                            <div class="menu-item-content">
                                <div class="item-title">Besql</div>
                                <div class="item-desc">Blazor Entity Framework SQLite</div>
                            </div>
                        </a>

                        <a class="menu-item" href="@Urls.BlazorUI" target="_blank">
                            <div class="menu-item-content">
                                <div class="item-title">BlazorUI</div>
                                <div class="item-desc">Native Blazor UI components</div>
                            </div>
                        </a>

                        <a class="menu-item menu-item--disabled">
                            <div class="menu-item-content">
                                <div class="item-title">bit Academy</div>
                                <div class="item-desc">Coming soon</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <a class="header-link @(currentUrl == Urls.Demos ? "header-link--active" : null)" href="@Urls.Demos">Demos</a>
            <a class="header-link @(currentUrl == Urls.Pricing ? "header-link--active" : null)" href="@Urls.Pricing">Pricing</a>
            <a class="header-link @(currentUrl == Urls.AboutUs ? "header-link--active" : null)" href="@Urls.AboutUs">About us</a>
            <a class="header-link @(currentUrl == Urls.ContactUs ? "header-link--active" : null)" href="@Urls.ContactUs">Contact us</a>
        </div>
        <div class="right-section">
            <a class="github-container" target="_blank" aria-label="Github repository" title="Github repository" href="@Urls.GithubRepo">
                <span class="github-btn"></span>
            </a>

            <button @onclick="WrapHandled(ToggleTheme)" class="toggle-theme-btn dark-theme" title="Turn on light">
                <span class="icon-container">
                    <img src="/images/sun.png" />
                </span>
            </button>
            <button @onclick="WrapHandled(ToggleTheme)" class="toggle-theme-btn light-theme" title="Turn off light">
                <span class="icon-container">
                    <img src="/images/moon.svg" />
                </span>
            </button>
        </div>
    </div>

    <div class="header-second-row">
        <BitActionButton IconName="ChevronRight"
                         Class="header-action-button"
                         OnClick="@WrapHandled(ToggleHeaderMenu)"
                         Styles="@(new() { Icon = isHeaderMenuOpen ? "transform:rotate(-90deg)" : "transform:rotate(90deg)" })">
            @GetActiveRouteName()
        </BitActionButton>
    </div>
</header>

@if (isHeaderMenuOpen)
{
    <nav class="header-nav">
        <BitButton IconName="Cancel"
                   Variant="BitVariant.Text"
                   Class="header-nav-close-btn"
                   OnClick="@WrapHandled(ToggleHeaderMenu)" />
        <div class="header-nav-link header-ps-btn @(IsProductsServicesActive() ? "header-nav-link--active" : null)">
            Products
            <div class="header-menu-popup">
                <div class="col">
                    <a class="menu-item @(isLcncDocRoute ? "active" : "")" href="@Urls.LowCodeNoCode" @onclick=@WrapHandled(ToggleHeaderMenu)>
                        <div class="menu-item-content">
                            <div class="item-title">Low-code/<span style="opacity:0.5">No-code</span></div>
                            <div class="item-desc">(Private alpha)</div>
                        </div>
                    </a>

                    <a class="menu-item @(isTemplateDocRoute ? "active" : "")" href="@Urls.Templates" @onclick=@WrapHandled(ToggleHeaderMenu)>
                        <div class="menu-item-content">
                            <div class="item-title">Boilerplate</div>
                            <div class="item-desc">Feature-rich project template</div>
                        </div>
                    </a>

                    <a class="menu-item @(isButilDocRoute ? "active" : "")" href="@Urls.Butil" @onclick=@WrapHandled(ToggleHeaderMenu)>
                        <div class="menu-item-content">
                            <div class="item-title">Butil</div>
                            <div class="item-desc">Blazor utils for browser APIs</div>
                        </div>
                    </a>

                    <a class="menu-item @(isBswupDocRoute ? "active" : "")" href="@Urls.Bswup" @onclick=@WrapHandled(ToggleHeaderMenu)>
                        <div class="menu-item-content">
                            <div class="item-title">Bswup</div>
                            <div class="item-desc">Blazor PWA on steroids</div>
                        </div>
                    </a>

                    <a class="menu-item @(isBesqlDocRoute ? "active" : "")" href="@Urls.Besql" @onclick=@WrapHandled(ToggleHeaderMenu)>
                        <div class="menu-item-content">
                            <div class="item-title">Besql</div>
                            <div class="item-desc">Blazor Entity Framework SQLite</div>
                        </div>
                    </a>

                    <a class="menu-item" href="@Urls.BlazorUI" @onclick=@WrapHandled(ToggleHeaderMenu) target="_blank">
                        <div class="menu-item-content">
                            <div class="item-title">BlazorUI</div>
                            <div class="item-desc">Native Blazor UI components</div>
                        </div>
                    </a>

                    <a class="menu-item menu-item--disabled">
                        <div class="menu-item-content">
                            <div class="item-title">bit Academy</div>
                            <div class="item-desc">Coming soon</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <a class="header-nav-link @(currentUrl == Urls.Demos ? "header-nav-link--active" : null)" href="@Urls.Demos" @onclick=@WrapHandled(ToggleHeaderMenu)>Demos</a>
        <a class="header-nav-link @(currentUrl == Urls.Pricing ? "header-nav-link--active" : null)" href="@Urls.Pricing" @onclick=@WrapHandled(ToggleHeaderMenu)>Pricing</a>
        <a class="header-nav-link @(currentUrl == Urls.AboutUs ? "header-nav-link--active" : null)" href="@Urls.AboutUs" @onclick=@WrapHandled(ToggleHeaderMenu)>About us</a>
        <a class="header-nav-link @(currentUrl == Urls.ContactUs ? "header-nav-link--active" : null)" href="@Urls.ContactUs" @onclick=@WrapHandled(ToggleHeaderMenu)>Contact us</a>
    </nav>
}